<template>
	<view style="width: 100%;" class="content">
	<search></search>
	<view style="width: 100%;">
		<view class="uni-margin-wrap">
			<swiper style="width: 100%;" class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
				:duration="500">
				<swiper-item style="width: 100%;" v-for="item in blist" :key="item.goods_id">
					<view style="width: 100%;" class="swiper-item uni-bg-red">
						<navigator :url =  "'../../subpkg/shops/shops?goods_id='+item.goods_id">
							<img style="width: 100%;" :src="item.image_src" alt="">
						</navigator>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="lei">
			<view v-for="item in blists" class="">
				<navigator :open-type="item.name=='分类'?'switchTab':'navigate'" :url="item.name=='分类'?'../cart/cart':'/subpkg/shoplist/shoplist?query='+item.name">
					<img style="width: 100%;height: 100px;" :src="item.image_src" alt="">
				</navigator>				
			</view>
		</view>
		<view class="" style="margin-top: 50px;" v-for="item in blistss">
			<view class="">
				<img style="width: 100%;height: 30px;" :src="item.floor_title.image_src" alt="">
			</view>
			<view class="imglist">
				<view v-for="items in item.product_list">
					<navigator :url="items.url">
						<img :src="items.image_src" alt="">
					</navigator>
					
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script setup>
	import search from '../../components/my_search/my_search.vue'
</script>
<script>
	export default {
		data() {
			return {
				blist:[],
				blists:[],
				blistss:[],
			};
		},
		methods: {
			fun(){
				uni.request({
				    url: 'https://www.uinav.com/api/public/v1/home/swiperdata', 
				    data: {},
				    success: (res) => {
				        this.blist = res.data.message;
				    }
				});
			},
			funs(){
				uni.request({
				    url: 'https://www.uinav.com/api/public/v1/home/catitems', 
				    data: {},
				    success: (res) => {
				        console.log(res.data);
				        this.blists = res.data.message;
				    }
				});
			},
			funss(){
				uni.request({
				    url: 'https://www.uinav.com/api/public/v1/home/floordata', 
				    data: {},
				    success: (res) => {
				        console.log(res.data.message[0]);
						  res.data.message.forEach(floor => {
							floor.product_list.forEach(prod => {
							  prod.url = '/subpkg/shoplist/shoplist?' + prod.navigator_url.split('?')[1]
							})
						  })
				        this.blistss = res.data.message;
						
				    }
				});
			},
		},
		onLoad() {
			this.fun()
			this.funs()
			this.funss()
		}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	.lei{
		display: flex;
		width: 100%;
		margin-top: 20px;
	}
	.lei>view{
		width: 33.3%;
	}
	.imglist{
		/* display: flex; */
		/* flex-wrap: wrap; */
		width: 100%;
	}
	.imglist>view{
		width: 33.3%;
		float: left;
	}
	.imglist image{
		width: 100%;
		height: 80px;
	}
	.imglist>view:nth-of-type(1) image{
		height: 160px;
		
	}
</style>
